<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>	</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<style>	
      
      *{
      	margin: 0;
      	padding: 0;
      }


      ul{
      	list-style: none;
      	width:500px;
      	height: 200px;
      	margin:100px auto;
      	overflow: hidden;
      }

      ul li{
      	transition-duration: .2s;
      	width:100px;
      	height: 200px;
      	float: left;
      }


      ul li:nth-child(1){
      	 background-color: #FF9999;
      }

       ul li:nth-child(2){
      	 background-color: #0099CC;
      }

       ul li:nth-child(3){
      	 background-color: #996699;
      }

       ul li:nth-child(4){
      	 background-color: #FF6666;
      }
       ul li:nth-child(5){
      	 background-color: #FF9966;
      }


      ul:hover li{
      	width:calc(200px / 4);
      }

      ul li:hover{
      	width:300px;
      }



</style>	  
<body>
		
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>


</body>
</html>